@import "../../../commonStyle/var";
@import "../../../commonStyle/tool";
@import "./var";

.btn{
  &.btn-s{
    padding-left: .15rem;
    padding-right: .15rem;
    font-size: .24rem;
    height: .45rem;
  }
  &.btn-m{
  }
  &.btn-b{
    height: .8rem;
    font-size: .28rem;
  }
}

.page-space-top{
  padding-top: @page_space_top;
}

input[type=checkbox],input[type=radio]{
  width: .3rem;
  height: .3rem;
}

textarea{
  padding: .2rem;
}

.container{
  padding-left: @space_hor;
  padding-right: @space_hor;
}

.row{
  margin-left: -@space_hor;
  margin-right: -@space_hor;
}

html body{
  background-color: #f0f2f5;
}

//popup-reset start
.popup-wrapper{
  border-radius: 0;
  padding: 0 35px 35px;
  .popup-header{
    padding: 25px 0;
    border-bottom: 1px solid @border;
    position: relative;
    h4.title{
      font-size: 18px;
      color: @black;
      line-height: 1.5;
      padding-right: 40px;
      span{
        display: inline;
      }
    }
    .icon-close{
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10px;
    }
  }
  .popup-content{
    padding-left: 0;
    padding-right: 0;
  }
}
//popup-reset end

.bread-nav{
  display: flex;
  align-items: center;
  color: @gray;
  font-size: 14px;
  padding: 20px 0;
  >li{
    display: inline-flex;
    & + li{
      &:before{
        content: '>';
        display: inline-flex;
        padding-left: 5px;
        padding-right: 5px;
      }
    }
    a{
      white-space: nowrap;
    }
  }
}

.load-more{
  font-size: 16px;
  color: @light-black;
  cursor: pointer;
  display: flex;
  align-items: center;
  &.active{
    &:after{
      transform: rotate(-180deg);
    }
  }
  &:after{
    content: '';
    display: inline-block;
    .bg('icon/icon-allow_down_main',png);
    width: 13px;
    height: 8px;
    margin-left: 10px;
    transition: all .3s;
  }
}

.panel{
  .container;
  padding-top: .3rem;
  padding-bottom: .3rem;
  background-color: #fff;
  border-radius: 4px;
  & + &{
    margin-top: @space_bottom;
  }
}

.page{
  .panel{
    &:last-of-type{
      padding-bottom: .6rem;
    }
  }
}

input,select, textarea{
  font-size: .26rem;
}

input,select{
  height: .6rem;
  color: @light-black;
}

input{
  padding-left: .2rem;
  padding-right: .2rem;
}

.fix-top-menu-list,.tab-list{
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .3s;
  font-size: .3rem;
  &.to-top{
    transform: translateY(-100%);
  }
  >li{
    flex-shrink: 0;
    position: relative;
    height: 100%;
    cursor: pointer;
    &:after{
      content: '';
      position: absolute;
      left: 50%;
      margin-left: -.15rem;
      height: .06rem;
      width: .3rem;
      bottom: .1rem;
      background-color: @red;
      transition: all .3s;
      transition-delay: .1s;
      transform-origin: center;
      transform: scaleX(0);
      border-radius: 4px;
    }
    &.active{
      &:after{
        transform: scaleX(1);
      }
      a{
        color: @black;
      }
    }
    a{
      height: 100%;
      display: flex;
      align-items: center;
      color: @light-black;
    }
  }
}

.fix-top-menu-list{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  box-shadow: 0 -2px 16px 0 rgba(108, 83, 83, 0.4);
  .container;
  height: .8rem;
}

.tab-list{
  height: .85rem;
}


.search-form{
  display: flex;
  align-items: center;
  justify-content: space-between;
  select{
    width: 1.8rem;
    margin-right: .2rem;
  }
  .input-search{
    flex-grow: 1;
    position: relative;
    input{
      padding-right: .7rem;
      width: 100%;
    }
    .btn-submit{
      position: absolute;
      right: 0;
      top: 0;
      width: .7rem;
      height: 100%;
      .flex-center;
      background-color: transparent;
    }
  }
}

.tag{
  padding-left: .1rem;
  padding-right: .2rem;
  height: .4rem;
  display: flex;
  align-items: center;
  font-size: .24rem;
}

.raise-list{
  font-size: .24rem;
  >li{
    display: flex;
    align-items: baseline;
    .raise-list-title{
    }
    .raise-list-count{
    }
  }
}

.wish-list{
  .list(2.3rem, 1.5rem, .3rem, .3rem);
  >li{
    a{
      display: flex;
      .img{
        box-sizing: content-box;
        border-radius: 4px;
        position: relative;
        border: 1px solid @border;
        .tag{
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .content{
        justify-content: space-between;
        .top{
          .title{
            margin-bottom: .1rem;
            font-size: .3rem;
            color: @black;
            .text-overflow;
            span{
              display: inline;
            }
          }
          .area{
            font-size: .24rem;
          }
        }
        .bottom{

        }
      }
    }
  }
}

.dropload-down{
  margin-top: .6rem;
}

.popup-wrapper .popup-content{
  max-height: 350px;
}

.process-wrapper{
  &__process{
    &-bar{
      &-point{
      }
    }
  }
  &__text{
    font-size: .24rem;
    margin-left: .2rem;
  }
}

.title-bar{
  font-size: .32rem;
  color: @black;
  position: relative;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  &:before{
    content: '';
    position: absolute;
    left: -@space_hor;
    top: 10%;
    height: 80%;
    width: .06rem;
    background-color: @red;
  }
  .sub-title{
    font-size: .24rem;
    color: @gray;
  }
}

.img-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: -.2rem;
  margin-left: -.25rem;
  &.auto-size{
    >li{
      width: auto;
      height: auto;
    }
  }
  >li{
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: .2rem;
    margin-left: .25rem;
    .img-wrap(calc((100% - .25rem * 3) / 3), 1.25rem);
  }
}

.process-list{
  >li{
    padding: .4rem 0;
    & + li{
      border-top: 1px solid @border;
    }
    &:first-child{
      padding-top: 0;
    }
    &:last-child{
      padding-bottom: 0;
    }
    .meta{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .15rem;
      .left{
        display: inline-flex;
        align-items: center;
        .time{
          color: @black;
          font-size: .26rem;
        }
        .org{
          margin-left: .2rem;
          display: inline-flex;
          align-items: center;
          color: @blue;
          font-size: .24rem;
          .icon{
            margin-right: 5px;
          }
        }
      }
      .go-info{
        font-size: .24rem;
        color: @gray;
      }
    }
    .desc{
      font-size: .28rem;
      color: @light-black;
      line-height: 1.5;
      .text-limit2;
    }
    .img-list{
      margin-top: .15rem;
    }
  }
}

.user-info{
  .avatar{
    .avatar(.8rem);
    margin-right: .25rem;
  }
  .meta-content{
    width: calc(100% - 1.05rem);
    .meta-content-top{
      font-size: .28rem;
      .user-name{
        width: 2rem;
        margin-right: .2rem;
        flex-shrink: 0;
        .text-overflow;
      }
      .donate-count{
        width: calc(100% - 2.2rem);
        font-size: .26rem;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        .donate-count-title{
          flex-shrink: 0;
        }
        .donate-count-desc{
          .text-overflow;
        }
      }
      .msg-type{
        font-size: .26rem;
      }
    }
    .meta-content-desc{
      font-size: .28rem;
    }
  }
}

.msg-list{
  .container;
  >li{
    padding: .4rem 0;
    &:first-child{
      padding-top: 0;
    }
    &.no-reply{
      .content{
        margin-top: -.35rem !important;
      }
    }
    .user-info + .content{
      margin-top: .05rem;
    }
    .content{
      padding-left: 1.05rem;
      .desc{
        font-size: .26rem;
        padding: .2rem;
        margin-bottom: .2rem;
        margin-top: .15rem;
        &:before{
          content: '';
          .triangle-bottom;
          border-bottom: 13px solid #f5f7fa;
          border-top: 8px solid transparent;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          position: absolute;
          left: .2rem;
          top: -18px;
        }
      }
      >.time{
      }
      .time{
        font-size: .26rem;
      }
      .bottom{
        font-size: .26rem;
        .oprea{
          margin-left: .3rem;
        }
      }
    }
  }
}

.tab-content{
  .tab-pane{
    padding-top: .3rem;
  }
}

.appro-table{
  width: 100%;
  tr{
    th{
      text-align: left;
      font-size: .3rem;
      padding-bottom: 5px;
      &:last-child{
        text-align: right;
      }
    }
    &:first-child{
      td{
        padding-top: 0;
      }
    }
    td{
      border-bottom: 1px solid @border;
      padding: .4rem .2rem .4rem 0;
      &:last-child{
        padding-right: 0;
        text-align: right;
      }
      &.appro-title{
        width: 55%;
        font-size: .28rem;
        color: @black;
        line-height: 1.5;
      }
      &.appro-time{
        font-size: .26rem;
        color: @light-black;
        white-space: nowrap;
      }
      &.appro-cost{
        font-size: .26rem;
        color: @red;
        min-width: 1.45rem;
      }
    }
  }
}

.footer-menu-list{
  >li{
    width: 25%;
    &.active{
      a{
        color: @red;
      }
      .icon-wrapper{
        .icon{
          &:first-child{
            display: inline-block;
          }
          &:last-child{
            display: none;
          }
        }
      }
    }
    a{
      padding-top: .25rem;
      display: flex;
      flex-direction: column;
      color: @light-black;
    }
    .icon-wrapper{
      height: .4rem;
      margin-bottom: .1rem;
      .flex-center;
      .icon{
        &:first-child{
          display: none;
        }
        &:last-child{
          display: inline-block;
        }
      }
    }
    &:hover{
      a{
        color: @red;
      }
    }
  }
}

.fix-bottom-area{
  .icon-area{
    width: .9rem;
    padding: 2px 0;
    .icon-wrapper{
      margin-bottom: .1rem;
      height: .4rem;
    }
  }
  .btn{
    flex-grow: 1;
    & + .btn{
      margin-left: .2rem;
    }
  }
}

.bottom-popup{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #fff;
  padding: .8rem .5rem .6rem;
  border-radius: 25px 25px 0 0;
  transition: all .3s;
  transform: translateY(100%);
  &.active{
    transform: translateY(0);
  }
  &__header{
    margin-bottom: .45rem;
    &-title{
      text-align: center;
      font-size: .28rem;
      color: @black;
      line-height: 1.5;
    }
  }
  &__content{

  }
  &__footer{

  }
  &__mask{
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s;
    opacity: 0;
    z-index: 999;
    &.active{
      opacity: 1;
    }
  }
}

.comment-bottom-popup{
  .bottom-popup__footer{
    font-size: .26rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0 .6rem;
    button[type=submit]{
      background-color: transparent;
      cursor: pointer;
    }
  }
}

.form-group-name{
  font-size: .3rem;
  color: @black;
  margin-bottom: .25rem;
}

.form-group{
  margin-bottom: .3rem;
  .field-name{
    font-size: .28rem;
    color: @black;
    line-height: 1.5;
    margin-bottom: .1rem;
    display: flex;
    align-items: baseline;
    .sub-field-name{
      font-size: .24rem;
      line-height: 1.2;
      color: @gray;
      margin-left: .15rem;
    }
  }
  .form-text{
    font-size: 14px;
    color: @light-black;
  }
  .form-field{
    input[type=text],input[type=number],textarea,select{
      width: 100%;
      background-color: @input-bg-color;
      border: 0;
    }
    textarea{
      height: 1.6rem;
    }
    select{
      background-color: @input-bg-color;
    }
    input[type=text],select{
      height: .75rem;
    }
  }
  .form-msg{
    font-size: .24rem;
    margin-top: .15rem;
    line-height: 1.2;
    color: @gray;
  }
}

.form-group-inline{
  display: flex;
  align-items: flex-start;
  padding-top: .3rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid @border;
  position: relative;
  &.no-after{
    &:after{
      display: none;
    }
  }
  &:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    transform: scaleX(0);
    transition: all .3s;
    border-bottom: 1px solid @blue;
  }
  &:hover{
    &:after{
      transform: scaleX(1);
    }
  }
  .field-name{
    width: 1.5rem;
    flex-shrink: 0;
    font-size: .28rem;
    color: @black;
  }
  .form-field{
    flex-grow: 1;
    input,select{
      height: auto;
      width: 100%;
      background-color: #fff;
      border-radius: 0;
      border: 0;
    }
    select{
      padding-left: .1rem;
    }
  }
}

.form-block{
  margin-bottom: .35rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid @border;
}

.input-unit{
  input{
    padding-right: .7rem;
  }
  .unit{
    font-size: .26rem;
    width: .7rem;
  }
}

.area-select{
  margin-bottom: .2rem;
}

.pay-list{
  >li{
    &.active{
      .radio-box{
        .icon{
          transform: scale(1);
        }
      }
    }
    label{
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    & + li{
      margin-top: .4rem;
    }
    .img-pay-type{
      height: .5rem;
    }
    .radio-box{
      background-color: #f5f5f5;
      border: 1px solid #f0f0f0;
      .flex-center;
      width: .36rem;
      height: .36rem;
      border-radius: 50%;
      .icon{
        transition: all .3s;
        transform: scale(0);
      }
    }
  }
}

.popup-wrapper{
  padding: 0 .3rem .3rem;
  border-radius: 4px;
  .icon-close{
    position: absolute;
    top: -.8rem;
    right: .3rem;
  }
  .popup-header{
    padding: .25rem 0;
    h4.title{
      font-size: .36rem;
    }
  }
  .popup-content{
    margin: .2rem 0;
  }
}

.summary-list {
  > li {
    padding: 0 .15rem;
    &:first-child{
      padding-left: 0;
    }
    &:last-child{
      padding-right: 0;
    }
    .summary-list__title {
      font-size: .24rem;
    }

    .summary-list__desc {
      font-size: .36rem;
    }

    & + li {
      border-left: 1px solid @border;
    }
  }

  &.summary-list-reverse {
    > li {

      .summary-list__title {
      }

      .summary-list__desc {
      }
    }
  }
}

.org-info{
  display: flex;
  align-items: center;
  &__img{
    .img-wrap(1.26rem);
    margin-right: .2rem;
    border: 1px solid @border;
    border-radius: 4px;
  }
  &__content{
    height: 1.26rem;
    border-bottom: 1px solid @border;
    flex-grow: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    &-title{
      color: @light-black;
      font-size: .26rem;
      margin-bottom: .15rem;
    }
    &-desc{
      color: @black;
      font-size: .3rem;
    }
  }
}

.title-desc-item{
  font-size: .26rem;
  & + &{
    margin-top: .15rem;
  }
  &__title{
  }
  &__desc{
  }
}

.title-bar-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  height: .9rem;
  .container;
  position: relative;
  border-radius: 4px 4px 0 0;
  &:after{
    content: '';
    position: absolute;
    left: @space_hor;
    right: @space_hor;
    bottom: 0;
    border-bottom: 1px solid @border;
  }
  .title-bar{
    margin-bottom: 0;
  }
  .title-bar-item{
    font-size: .32rem;
    &.off{
      color: @light-black;
    }
  }
  & + .title-bar-wrapper-tips{
    padding-top: .2rem;
  }
}
.title-bar-wrapper-tips{
  font-size: .24rem;
  line-height: 1.5;
  background-color: #fff;
  color: gray;
}

.space-list{
  >li{
    background-color: #fff;
    border-radius: 4px;
    .container;
    & + li{
      margin-top: .2rem;
    }
    &:first-child{
      border-radius: 0 0 4px 4px;
    }
  }
}

.donate-list{
  .space-list;
  >li{
    padding-top: .25rem;
    padding-bottom: .25rem;
    height: 1.8rem;
    display: flex;
    flex-direction: column;
    .meta{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .15rem;
      .title{
        font-size: .3rem;
        color: @black;
      }
      .cost{
        color: @red;
        font-size: .26rem;
      }
      .status{
        color: @blue;
        font-size: .26rem;
      }
    }
    .content{
      flex-grow: 1;
      font-size: .24rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .content-info{
        flex-shrink: 0;
        .text-overflow;
        .content-info-item{
          display: flex;
          align-items: center;
          line-height: 1.2;
          & + .content-info-item{
            margin-top: .15rem;
          }
          .info-item-title{
            color: @gray;
          }
          .info-item-desc{
            color: @light-black;
          }
        }
      }
      .btns{
        display: flex;
        justify-content: flex-end;
        margin-bottom: -.1rem;
        flex-wrap: wrap-reverse;
        a,button{
          display: inline-flex;
          padding: 0 .1rem;
          height: .4rem;
          color: @light-black;
          border: 1px solid @light-black;
          border-radius: 4px;
          flex-shrink: 0;
          margin-bottom: .1rem;
          & + a,& + button{
            margin-left: .2rem;
          }
        }
      }
    }
  }
}

.codonate-list{
  .space-list;
  .list(2.3rem, 1.5rem, .25rem, 0);
  >li{
    padding-top: .3rem;
    padding-bottom: .3rem;
    .img{
      border-radius: 4px;
      border: 1px solid @border;
      box-sizing: content-box;
    }
    .content{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .title{
        font-size: .3rem;
        color: @black;
        line-height: 1.5;
        .text-limit2;
      }
      .info{
        font-size: .24rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-item{
          display: flex;
        }
        .info-title{
          color: @gray;
        }
        .info-data{
          color: @red;
        }
      }
    }
  }
}

div.msgBox {
  width: 90% !important;
  left: 50% !important;
  margin-left: -45%;
  .msgBoxTitle{
    margin-bottom: .3rem;
    span{
      display: inline-block;
      font-size: .3rem;
      border-bottom: 3px solid #68c258;
      margin-bottom: -2px;
      height: .55rem;
      line-height: .55rem;
    }
  }
  .msgBoxContent{
    margin-bottom: .3rem;
  }
  div.msgBoxButtons{
    input[type='button'] {
      margin-left: .3rem;
      height: .6rem;
      line-height: .6rem;
      width: 1.8rem;
      color: #fff;
      border: 0;
      display: inline-block;
      &:first-child{
        margin-left: 0;
        .btn.btn-red;
        background-color: unset !important;
        border: unset !important;
        color: #fff !important;
      }
      &:last-child{
        .btn.btn-red-border;
      }
    }
  }
}

.select-custom{
  position: relative;
  select{
    -webkit-appearance: none;
    position: relative;
    z-index: 2;
    padding-right: .4rem;
  }
  &:hover{
    &:after{
      transform: rotate(-180deg);
    }
  }
  &:after{
    content: '';
    position: absolute;
    z-index: 1;
    right: 0;
    top: 50%;
    margin-top: -.06rem;
    margin-left: .2rem;
    .icon-triangle-down_white;
    transition: all .3s;
    transform-origin: center;
  }
}


